<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
         pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Admin Documentation Page</title>
        <link rel="stylesheet" href="jquery-ui.css">
        <script src="jquery.js"></script>
        <script src="jquery-ui.js"></script>
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" type="text/css" href="app1.css"/>
         <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
        
<script type="text/javascript">
	function myFun2(id){   	
		var v  =$("#selectedDocDivId").text()+" "+$("#"+id).val();
		$("#selectedDocDivId").text(v);
    }
    
    function my_edit(id){   	
         document.getElementById("selectedDocDivId").value=document.getElementById("doc_lable3").innerHTML;
         document.getElementById("selectedDocDivId").disabled=false;
    }
    
    function my_delete(id){
  		document.getElementById("doc_lable3").innerHTML="";
    	$('label[id="doc_lable1"]').text('');
  		document.getElementById("selectedDocDivId").innerHTML="";
  	}
    	    
    function myFun(id){
    	var tetxm=$("#selectedDocDivId").val()+" "+$("#"+id).text();
    	$("#selectedDocDivId").val(tetxm);
    	document.getElementById(id).disabled=true;
    }
    
    function myFunn1(){
    	$("#addDoc").show();
    	var docList1=document.getElementById("docList1");
    	var docCateValueId=docList1.options[docList1.selectedIndex].value;
    	document.getElementById("doc_lable").innerHTML=docList1.options[docList1.selectedIndex].text.trim();
    	document.getElementById("doc_lable1").innerHTML=docList1.options[docList1.selectedIndex].text.trim();
    	$("#docCateId").val(docCateValueId);
    }
    
	function deleteAdminDocument(adminDocId){
 	   	var y={id:adminDocId};
 	   	$.ajax({
   	    		headers: { 
   	    		        'Accept': 'application/json',
   	    		        'Content-Type': 'application/json; charset=utf-8' 
   	    		},
   	            type: "POST",
   	            url: "deleteAdminByDocumentId",
   	            contentType: "application/json; charset=utf-8",
   	            data: JSON.stringify(y),
   	            async: false,    
   	            cache: false,              
   	            processData:false,
   	            success: function(resposeJsonObject){ 
   	            	$("#adminDocRuleFormId").attr("action", "success-login");
   	            }
		});
 	  	$('#tableAdminDoc').empty();
 	   	$.get("getAdminDocRules", function(data) {
 	   	$('#tableAdminDoc').append("<tr class='active'><td width='20%' ><b>Document Name</b></td><td ><b>Rules</b></td><td width='20%' ><b>Delete</b></td></tr>");
  			if(data.length>0){
 				$.each(data, function(k, v) {
 					$('#tableAdminDoc').append("<tr class='info' ><td width='20%' style='word-wrap:break-word;'>"+v.name+"</td><td  width='40%' >"+v.rules+"</td><td  width='20%'><button id='btnRemoveRow' onclick='deleteAdminDocument("+v.id+")' class='btn btn-default' title='Delete from DB'><span class='glyphicon glyphicon-trash'></span></td></tr>");
				}); 
			}
 			else{
 				$('#tableAdminDoc').append("<tr class='info'><td colspan='3' align='center'><b>No Documents yet</b></td></tr>");
 			}
     	}); 
	}
	
    function myFunn2(){
    	$('#doc_lable3').empty();
    	$('#doc_lable3').text($('#selectedDocDivId').text().trim());
    	$('#selectedDocDivId').empty();
    }

    function split(val) {
        return val.split(/,\s*/);
    }
    function extractLast(term) {
        return split(term).pop();
    }
    
    $(document).ready(function(){
	

        $.get("getDocuments1", function(data) {
            $.each(data, function(i, item) {
                $('#docList1')
                        .append($("<option></option>")
                        .attr("value", item.id)
                        .text(item.name));
            });
        });
        
       
        $.get("getDocumentNames", function(data) {
            $.each(data, function(i, item) {
                $('#documents')
                        .append($("<option></option>")
                        .attr("value", item.id)
                        .text(item.name));
            });
        });
        
        $('#documents').on('change',function(){
        	var v  =$("#selectedDocDivId").text()+" "+$("#documents option:selected").text();
			$("#selectedDocDivId").text(v);
        });
        
    	$("#x").click(function(event){ 
        });
		
    	$("#docCatRuleForm").submit(function(){
    		var doclable3Value =$('textarea#doc_lable3').val();
    		var labelValueId = $("#doc_lable1").text();
    		if(doclable3Value != null && doclable3Value != "" && labelValueId != null && labelValueId != ""){
    			var docLable3Value = $("#doc_lable3").val();
        	    var docCateIdValue = $('[name="docCateId"]').val();
        	    var y={id:docCateIdValue,rules:docLable3Value,name:"",status:0};
           		$.ajax({
           	    		headers: { 
           	    		        'Accept': 'application/json',
           	    		        'Content-Type': 'application/json; charset=utf-8' 
           	    		},
           	            type: "POST",
           	            url: "saveDocumentRulesByDocId",
           	            contentType: "application/json; charset=utf-8",
           	            data: JSON.stringify(y),
           	            async: false,    
           	            cache: false,              
           	            processData:false,
           	            success: function(resposeJsonObject){ 
           	            	alert('Rules has submitted successfully');
           	            	$('#docCatRuleForm').fadeOut();
           	            	$("#docCatRuleForm").attr("action", "success-login");
           	            }
           		});
    		}else if(labelValueId != null && labelValueId != ""){
    			alert("Please select and Add the document name");
    			return false;
    		}else if(doclable3Value != null && doclable3Value != ""){
    			alert("Please select and Add the category name");
    			return false;
    		}else{ 
    			alert("Please select and Add the category name and document name");
    			return false;
       		}
		});
    	
    	$.get("getAdminDocRules", function(data) {
			$('#tableAdminDoc').append("<tr class='active'><td width='20%' ><b>Document Name</b></td><td ><b>Rules</b></td><td width='20%' ><b>Delete</b></td></tr>");
      		if(data.length>0){
     			$.each(data, function(k, v) {
     				$('#tableAdminDoc').append("<tr class='info' ><td width='20%' style='word-wrap:break-word;'>"+v.name+"</td><td  width='40%' >"+v.rules+"</td><td  width='20%'><button id='btnRemoveRow' onclick='deleteAdminDocument("+v.id+")' class='btn btn-default' title='Delete from DB'><span class='glyphicon glyphicon-trash'></span></td></tr>");
				}); 
   			}
     		else{
     			$('#tableAdminDoc').append("<tr class='info'><td colspan='3' align='center'><b>No Documents yet</b></td></tr>");
     		} 
      	});
       });
    
    </script>
    </head>
    
<body  >
<div style="height:500px; overflow:auto;" onscroll="OnScrollDiv(this)" >  
<br>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;	<b>Add Category Name</b>
        	<select id="docList1"></select>
        	<input type="button" value="Add" class="button" onclick="myFunn1(); " />
      		<br/><br/></div>
      		
      		<div  id="addDocCategaryDivId" style="padding:30px;margin:0 auto;display:inline-block;border-color:#707070;border-style:solid;" align="center" >
      		<div id='doc_cate_div_select' align="center">
	<label id="doc_lable"><u>Document Category Rule </u></label> 
    <br><br>
</div>
      		<b>Add Document Name</b>
	 	<select id="documents"></select>

	 	<br/><br><br>
	 	<div >
		<input type="button" class="button" value="AND"  id="add" onclick="myFun2(id);">
		<input type="button" class="button" value="OR" id="or" onclick="myFun2(id);">
		<input type="button" class="button" value="(" id="s" onclick="myFun2(id);">
		<input type="button" class="button" value=")" id="b" onclick="myFun2(id);">	
	    <input type="button" value="Add" id="addmyfunn2"  class="button1" onclick="myFunn2()"  /><br>
		<div id ="selectedDocDivId" style="word-wrap: break-word; width: 400px; height:150px; background-color: ; border: 1px solid #ccc;" >
		</div>
		<br>

<div id="addDoc" >
	<form id="docCatRuleForm">
		<!-- <div id="docCategoryId" align="center" style="margin: 70px 10px 10px 40px;"> -->
		<b><u>Document Category Rule</u></b><br><br>
		<table class="displayTable" id="doctableRule" border="1" >
			<tr>
			<td width="320"><label id="doc_lable1"></label></td>
			<td width="250">
				<textarea readonly name="doc_lable3" id="doc_lable3" rows="3" cols="55"></textarea>
				<input type="hidden" id="docCateId" name="docCateId" value="" />
			</td>
			</tr>
		</table>
		<!-- </div>   -->
		
		<input class="button" type="button" value="Clear" onclick="my_delete(id);"/> 
		<input class="button" type="submit" value="Submit" />
		<br/>
		
		
	</form>
	</div>
	</div>
	</div>
	
	<table class="table table-hover" id="tableAdminDoc" style="width:42%;float:right; table-layout:fixed;">     
		</table>
		<!-- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -->
	<br> 
</div>
</body>
</html>